<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
        }

        .item {
            width: 25%;
            height: 200px;
        }

        .bgc1 {
            background-color: rgb(233, 229, 12);
        }

        .bgc2 {
            background-color: rgb(15, 235, 67);
        }

        .bgc3 {
            background-color: rgb(246, 104, 15);
        }

        .bgc4 {
            background-color: rgb(235, 14, 14);
        }

        @media screen and (min-width:992px) {
            .item {
                width: calc((100% - 10px * 3) / 4);
                height: 200px;
                margin: 0 10px 10px 0;
            }
            .item:nth-child(4n){
                margin-right: 0;
            }
        }

        @media screen and (min-width:768px) and (max-width:991px) {
            .item {
                width: calc((100% - 10px * 1) / 2);
                height: 200px;
                margin: 0 10px 10px 0;
            }
            .item:nth-child(2n){
                margin-right: 0;
            }
        }

        @media screen and (max-width:767px) {
            .item {
                width: 100%;
                height: 200px;
                margin-bottom: 10px;
            }.item:last-child{
                margin-bottom: 0;
            }
        }
    </style>
</head>

<body>
    <div class="box container-fluid">
        <div class="item bgc1 row">1</div>
        <div class="item bgc2 row">2</div>
        <div class="item bgc3 row"></div>
        <div class="item bgc4 row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-sm-push-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script>
        jQuery(function(){
            var cat = 100;
            for(var i= 0;i<cat;i++){
                var backgroundColor = `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`
                jQuery(`<div class="item row"></div>`).css({
                    backgroundColor
                }).appendTo(".box");
            }
        })
    </script>
</body>

</html>